<template>
  <div>
    <div style="width: 80%">
      <div style="background-color: aqua;">
        <h1 style="color: #B3C0D1;font-family: 'Bodoni MT'">角色分配权限</h1>
        <el-button type="primary" @click="queryRole()" style="margin: 0px 50px;">查看角色权限</el-button>
        <el-button type="primary" @click="displayButton()" v-if="userButton">返回</el-button>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="角色信息" prop="resource">
            <el-radio-group v-model="ruleForm.resource" size="medium"
                            v-for="(item,index) in dataForm.imgFileList" :key="index"
                            style="margin: 10px;display:inline-block; padding-left: 20px">
              <el-radio border :label="item.name" :value="item.id" name="type" @change="changeNum(item.id)"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="权限列表" prop="type">
            <el-checkbox-group v-model="ruleForm.type" size="medium" style="display: block">
              <div v-for="(item,index) in dataForm.checkboxList" :key="index"
                   style="display:inline-block; padding-left: 20px">
                <el-checkbox :label="item.name" :value="item.permissionId" name="type"
                             @change="changeNumPermission(item)"></el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item v-if="showButton">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tableTitle"><span class="midText"></span></div>

      <div style="background-color: antiquewhite">
        <h1 style="color: #B3C0D1;font-family: 'Bodoni MT'">用户分配角色</h1>
        <el-button type="primary" @click="queryUserRole()" style="margin: 0px 50px;">查看用户角色</el-button>
        <el-button type="primary" @click="displayButton1()" v-if="userButton1">返回</el-button>
        <el-form :model="userRoleFrom" :rules="rules" ref="ruleForms" label-width="100px" class="demo-ruleForm">
          <el-form-item label="用户信息" prop="userId">
            <el-radio-group v-model="userRoleFrom.userId" size="medium"
                            v-for="(item,index) in permissionFrom.userList" :key="index"
                            style="margin: 10px;display:inline-block; padding-left: 20px">
              <el-radio border :label="item.userName+'-->('+item.phone+')'" :value="item.id" name="type"
                        @change="changeUser(item.id)"></el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="角色信息" prop="roleId">
            <el-checkbox-group v-model="userRoleFrom.roleId" size="medium" style="display: block">
              <div v-for="(item,index) in permissionFrom.checkboxUserRoleList" :key="index"
                   style="display:inline-block; padding-left: 20px">
                <el-checkbox :label="item.name" :value="item" name="type"
                             @change="changeUserRole(item)"></el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="showButton1">
            <el-button type="primary" @click="submitForms('ruleForms')">立即创建</el-button>
            <el-button @click="ruleForms('ruleForms')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>

  </div>
</template>

<script>

  export default {
    name: 'AssignPermissions',
    data () {
      return {
        //创建按钮
        showButton: true,
        showButton1: true,
        userButton: false,
        userButton1: false,
        ruleForm: {
          name: '',
          region: '',
          date1: [{id: 88, name: '角色名称88'}],
          date2: [{id: 99, name: '权限名称99'}],
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          roleId: 0,
          Permission: []
        },
        dataForm: {
          imgFileList: [
            {id: 1, name: '角色名称'},
            {id: 2, name: '角色名称02'},
            {id: 3, name: '角色名称03'},
            {id: 4, name: '角色名称03'},
            {id: 5, name: '角色名称04'},
            {id: 6, name: '角色名称05'},
            {id: 7, name: '角色名称06'},
            {id: 8, name: '角色名称07'},
          ],
          checkboxList: [
            {id: 1, pid: 2, name: '权限名称'},
            {id: 2, pid: 3, name: '权限名称11'},
            {id: 3, pid: 4, name: '权限名称22'},
            {id: 4, pid: 4, name: '权限名称23'},
            {id: 5, pid: 4, name: '权限名称24'},
            {id: 6, pid: 4, name: '权限名称25'},
          ]
        },
        //用户角色分配
        userRoleFrom: {
          userId: '',
          roleId: [],
          resource: 0,
          roleIdList: []
        },
        //复选框值
        permissionFrom: {
          userList: [{id: 1, userName: '用户姓名', phone: '13227095543'}],
          checkboxUserRoleList: [
            {id: 1, name: '角色01'},
            {id: 2, name: '角色02'},
            {id: 3, name: '角色03'},
          ]
        },
        rules: {
          type: [
            {type: 'array', required: true, message: '请至少选择一个权限', trigger: 'change'}
          ],
          resource: [
            {required: true, message: '请选择角色', trigger: 'change'}
          ],
          userId: [
            {required: true, message: '请选择用户', trigger: 'change'}
          ],
          roleId: [
            {type: 'array', required: true, message: '请至少选择一个角色', trigger: 'change'}
          ]
        }
      }
    },
    created () {
      //查询角色列表
      this.$http.getRequest('user/role/role/index', {}).then(res => {
        if (res.data.code == 200) {
          this.dataForm.imgFileList = res.data.data
          this.permissionFrom.checkboxUserRoleList = res.data.data
          //取消查询 返回原数据
          this.ruleForm.date1 = res.data.data
        } else if (res.data.code == 403) {
          this.$message.info('未授权！')
        } else {
          this.$message.info(res.data.message)
        }
      }).catch(err => {
        this.$message.info(err)
      })

      //权限列表
      this.$http.getRequest('user/role/queryPermissionList', {}).then(res => {
        if (res.data.code == 200) {
          this.dataForm.checkboxList = res.data.data
          //取消查询 返回原数据
          this.ruleForm.date2 = res.data.data
        } else if (res.data.code == 403) {
          this.$message.info('未进行授权！')
        } else {
          this.$message.info(res.data.message)
        }
      }).catch(err => {
        this.$message.info(err)
      })

      //用户信息
      this.$http.getRequest('user/wx/userQueryList', {}).then(res => {
        if (res.data.code == 200) {
          this.permissionFrom.userList = res.data.data
        } else if (res.data.code == 403) {
          this.$message.info('未进行授权！')
        } else {
          this.$message.info(res.data.message)
        }
      }).catch(err => {
        this.$message.info(err)
      })

    },
    methods: {
      //显示 按钮
      displayButton () {
        //显示 操作按钮
        this.showButton = true
        this.dataForm.checkboxList = this.ruleForm.date2
        //隐藏返回按钮
        this.userButton = false
      },
      displayButton1 () {
        //显示 操作按钮
        this.showButton1 = true
        this.permissionFrom.checkboxUserRoleList = this.ruleForm.date1
        //隐藏返回按钮
        this.userButton1 = false
      },
      //查看角色权限
      queryRole () {
        var data = {
          role: this.ruleForm.roleId
        }
        if (data.role <= 0) {
          this.$message.info('请选择一个角色后查看')
        } else {
          // 隐藏创建 按钮
          this.showButton = false
          this.userButton = true
          this.$http.getRequest('user/role/role/rolePermission', data).then(res => {
            if (res.data.code == 200) {
              // 将存在的值 赋给文本框
              this.dataForm.checkboxList = res.data.data
            } else if (res.data.code == 403) {
              this.$message.info('未获取权限')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }
      },
      //查看用户角色
      queryUserRole () {
        var data = {
          userId: this.userRoleFrom.resource
        }
        console.log(data.userId)
        if (data.userId <= 0) {
          this.$message.info('请选择一个用户后查看')
        } else {
          //隐藏 操作按钮
          this.showButton1 = false
          //展示返回按钮
          this.userButton1 = true
          this.$http.getRequest('user/role/getRoleByUserId', data).then(res => {
            if (res.data.code == 200) {
              this.permissionFrom.checkboxUserRoleList = res.data.data
            } else if (res.data.code == 403) {
              this.$message.info('未获取权限')
            } else {
              this.$message.info(res.data.message)
            }
          }).catch(err => {
            this.$message.info(err)
          })
        }
      },

      //单选框 值
      changeNum (value) {
        this.ruleForm.roleId = value
      },
      //用户单选框 值
      changeUser (value) {
        this.userRoleFrom.resource = value
        console.log(this.userRoleFrom.resource)
      },
      //复选框 值
      changeNumPermission (id) {
        this.ruleForm.Permission.push(id)
      },
      //用户角色复选框值
      changeUserRole (id) {
        this.userRoleFrom.roleIdList.push(id)
        console.log(id)
      },
      //角色分配权限
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //获取权限 集合 组装数据
            if (this.ruleForm.Permission.length > 1) {
              var modeDetail = []
              for (var i = 0; i < this.ruleForm.Permission.length; i++) {
                let modelItem = {}
                modelItem['roleId'] = this.ruleForm.roleId
                modelItem['permissionId'] = this.ruleForm.Permission[i].id
                modeDetail[i] = modelItem
              }
            }
            var data = {relationList: modeDetail}
            console.log(data)
            this.$http.postRequest('user/role/permission/allocationPermission', data, 'application/json;charset=UTF-8').then(res => {
              if (res.data.code == 200) {
                this.$message.info('操作成功')
              } else if (res.data.code == 403) {
                this.$message.info('未获取操作权限')
              } else {
                this.$message.info(res.data.message)
              }
            }).catch(err => {
              this.$message.info(err)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      //分配用户角色
      submitForms (ruleForms) {
        this.$refs[ruleForms].validate((valid) => {
          if (valid) {
            //组装对象数组数据
            var userRoleList = []
            for (var i = 0; i < this.userRoleFrom.roleIdList.length; i++) {
              let modelItem = {}
              modelItem['adminId'] = this.userRoleFrom.resource
              modelItem['roleId'] = this.userRoleFrom.roleIdList[i].id
              userRoleList[i] = modelItem
            }
            var data = {
              userId: this.userRoleFrom.resource,
              userRoleList: userRoleList
            }
            console.log(data)
            this.$http.postRequest('user/role/role/allocationRole', data, 'application/json;charset=UTF-8').then(res => {
              if (res.data.code == 200) {
                this.$message.info('操作成功')
              } else if (res.data.code == 403) {
                this.$message.info('未获取操作权限')
              } else {
                this.$message.info(res.data.message)
              }
            }).catch(err => {
              this.$message.info(err)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
        this.ruleForm.roleId = 0
      },
      ruleForms (ruleForms) {
        this.$refs[ruleForms].resetFields()
        this.userRoleFrom.resource = 0
      }
    }
  }
</script>

<style scoped>
  .tableTitle {
    position: relative;
    margin: 0 auto;
    /*width: 600px;*/
    height: 2px;
    background-color: #d4d4d4;
    text-align: left;
    font-size: 16px;
    color: rgba(101, 101, 101, 1);
  }

  /*.midText {*/
  /*  position: absolute;*/
  /*  left: 50%;*/
  /*  background-color: #ffffff;*/
  /*  padding: 0 15px;*/
  /*  transform: translateX(-50%) translateY(-50%);*/
  /*}*/

</style>
